<script setup>
import {Notification} from "@arco-design/web-vue";
import {ref} from 'vue'
import apiAll from "@/api/apiAll.js";

const emits = defineEmits(["success"]);
const visible = ref(false)
const form = ref({
  type: 'openssl'
})
const loading = ref(false)

const handleOk = () => {
  loading.value = true
  if (form.value.type === 'openssl') {
    apiAll.sslApi.add(form.value).then(res => {
      Notification.success('添加成功')
      emits('success')
      form.value = {type: 'openssl'}
      visible.value = false;
    }).finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 300)
    })
  } else {
    const formData = new FormData();
    const jks = document.getElementById('jks');
    if (!jks.files[0]) {
      Notification.error("请选择要上传jks文件")
      return
    }
    for (let key in form.value) {
      formData.append(key, form.value[key])
    }
    formData.append('file', jks.files[0]);
    apiAll.sslApi.add(formData, {
      'Content-Type': 'multipart/form-data'
    }).then(res => {
      Notification.success('添加成功')
      emits('success')
      form.value = {type: 'openssl'}
      visible.value = false;
    }).finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 300)
    })
  }

};
const handleCancel = () => {
  visible.value = false;
}
const show = () => {
  visible.value = true;
}
defineExpose({show});
</script>

<template>
  <a-drawer :width="660" :ok-loading="loading" :visible="visible" @ok="handleOk" @cancel="handleCancel"
            ok-text="保存提交" unmountOnClose>
    <template #title>
      添加证书
    </template>
    <div class="flex-column">
      <a-form :model="form" :style="{ width: '600px' }">
        <a-form-item field="name" tooltip="唯一名称" label="名称">
          <a-input v-model="form.name" placeholder="请输入名称"/>
        </a-form-item>
        <a-form-item field="type" label="证书类型">
          <a-select v-model="form.type" :style="{width:'150px'}" placeholder="证书类型">
            <a-option value="openssl">openssl</a-option>
            <a-option value="jks">jks</a-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="form.type==='openssl'" field="publicKey" label="证书公钥">
          <a-textarea style="height: 200px" v-model="form.publicKey" placeholder="请输入公钥 fullchain.pem 内容"/>
        </a-form-item>
        <a-form-item v-if="form.type==='openssl'" field="privateKey" label="证书私钥">
          <a-textarea style="height: 200px" v-model="form.privateKey"
                      placeholder="请输入私钥 privkey.pem 内容(PKCS#8)"/>
        </a-form-item>
        <a-form-item v-if="form.type==='jks'" label="jks文件">
          <input id="jks" type="file" accept=".jks" placeholder="选择证书jks"/>
        </a-form-item>
        <a-form-item field="password" label="密码">
          <a-input v-model="form.password" placeholder="私钥密码，可为空"/>
        </a-form-item>
        <a-form-item field="remarks" label="备注">
          <a-textarea v-model="form.remarks" placeholder="备注" :max-length="125" allow-clear show-word-limit/>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>

</style>